const lrc = `[00:01.06]难念的经
[00:03.95]演唱：周华健
[00:06.78]
[00:30.96]笑你我枉花光心计
[00:34.15]爱竞逐镜花那美丽
[00:36.75]怕幸运会转眼远逝
[00:39.32]为贪嗔喜恶怒着迷
[00:41.99]责你我太贪功恋势
[00:44.48]怪大地众生太美丽
[00:47.00]悔旧日太执信约誓
[00:49.66]为悲欢哀怨妒着迷
[00:52.56]啊 舍不得璀灿俗世
[00:57.66]啊 躲不开痴恋的欣慰
[01:02.86]啊 找不到色相代替
[01:08.09]啊 参一生参不透这条难题
[01:13.15]吞风吻雨葬落日未曾彷徨
[01:15.73]欺山赶海践雪径也未绝望
[01:18.23]拈花把酒偏折煞世人情狂
[01:20.90]凭这两眼与百臂或千手不能防
[01:23.76]天阔阔雪漫漫共谁同航
[01:26.09]这沙滚滚水皱皱笑着浪荡
[01:28.68]贪欢一刻偏教那女儿情长埋葬
[01:32.38]
[01:34.09]吞风吻雨葬落日未曾彷徨
[01:36.50]欺山赶海践雪径也未绝望
[01:39.07]拈花把酒偏折煞世人情狂
[01:41.69]凭这两眼与百臂或千手不能防
[01:44.68]天阔阔雪漫漫共谁同航
[01:46.93]这沙滚滚水皱皱笑着浪荡
[01:49.54]贪欢一刻偏教那女儿情长埋葬
[01:53.41]
[02:15.45]笑你我枉花光心计
[02:18.53]爱竞逐镜花那美丽
[02:21.14]怕幸运会转眼远逝
[02:23.76]为贪嗔喜恶怒着迷
[02:26.43]责你我太贪功恋势
[02:28.98]怪大地众生太美丽
[02:31.60]悔旧日太执信约誓
[02:34.26]为悲欢哀怨妒着迷
[02:36.90]啊 舍不得璀灿俗世
[02:42.04]啊 躲不开痴恋的欣慰
[02:47.34]啊 找不到色相代替
[02:52.52]啊 参一生参不透这条难题
[02:57.47]吞风吻雨葬落日未曾彷徨
[03:00.05]欺山赶海践雪径也未绝望
[03:02.64]拈花把酒偏折煞世人情狂
[03:05.27]凭这两眼与百臂或千手不能防
[03:08.22]天阔阔雪漫漫共谁同航
[03:10.49]这沙滚滚水皱皱笑着浪荡
[03:13.06]贪欢一刻偏教那女儿情长埋葬
[03:18.45]吞风吻雨葬落日未曾彷徨
[03:20.90]欺山赶海践雪径也未绝望
[03:23.54]拈花把酒偏折煞世人情狂
[03:26.21]凭这两眼与百臂或千手不能防
[03:29.07]天阔阔雪漫漫共谁同航
[03:31.32]这沙滚滚水皱皱笑着浪荡
[03:33.92]贪欢一刻偏教那女儿情长埋葬
[03:39.32]吞风吻雨葬落日未曾彷徨
[03:41.84]欺山赶海践雪径也未绝望
[03:44.38]拈花把酒偏折煞世人情狂
[03:47.04]凭这两眼与百臂或千手不能防
[03:49.99]天阔阔雪漫漫共谁同航
[03:52.20]这沙滚滚水皱皱笑着浪荡
[03:54.89]贪欢一刻偏教那女儿情长埋葬
[04:00.28]吞风吻雨葬落日未曾彷徨
[04:02.68]欺山赶海践雪径也未绝望
[04:05.25]拈花把酒偏折煞世人情狂
[04:07.90]凭这两眼与百臂或千手不能防
[04:10.85]天阔阔雪漫漫共谁同航
[04:13.08]这沙滚滚水皱皱笑着浪荡
[04:15.75]贪欢一刻偏教那女儿情长埋葬
[04:19.48]`;

// 获取的 dom 元素
const doms = {
  audio: document.querySelector("audio"), // 音频播放器
  ul: document.getElementsByClassName("lrc-list")[0],
  container: document.querySelector(".container"),
};

// 每一行歌词字符串的接口
interface ObjI {
  time: number;
  words: string;
}

/**
 * 时间字符串转换为数字
 * @param timeStr 时间字符串 - 00:0.0
 * @returns 时间数字
 */
function parseTime(timeStr: string): number {
  let parts = timeStr.split(":");

  return +parts[0] * 60 + +parts[1];
}

/**
 * 解析歌词字符串
 * 返回一个具有歌词对象的数组:{time:开始时间,words:歌词内容}
 * @returns array - [{time:开始时间,words:歌词内容}]
 */
function parseLrc(): Array<ObjI> {
  const result: Array<ObjI> = [];

  const lines: Array<string> = lrc.split("\n");

  lines.forEach((item: string) => {
    const parts: Array<string> = item.split("]");

    const timeStr: string = parts[0].substring(1);

    // 每一行歌词
    const obj: ObjI = {
      time: parseTime(timeStr),
      words: parts[1],
    };

    result.push(obj);
  });

  return result;
}

const lrcData: Array<ObjI> = parseLrc();

/**
 * 歌词高亮下标
 * @returns 下标
 */
function findIndex() {
  const curTime: number = doms.audio.currentTime; // 当前歌词时间
  for (let i = 0; i < lrcData.length; i++) {
    if (curTime < lrcData[i].time) {
      return i - 1;
    }
  }

  // 最后一句
  return lrcData.length - 1;
}

// 创建歌词元素
function createLrcElement() {
  for (let i = 0; i < lrcData.length; i++) {
    const li = document.createElement("li");
    li.textContent = lrcData[i].words;
    doms.ul.appendChild(li);
  }
}
createLrcElement();

const containerHeight: number = doms.container.clientHeight; // 容器高度
const liHeight: number = doms.ul.children[0].clientHeight; // 歌词高度
const maxOffset: number = doms.ul.clientHeight - containerHeight; // 最大偏移量

// ul 偏移量
function setOffset() {
  const index: number = findIndex();
  let offset: number = index * liHeight + liHeight / 2;
  -containerHeight / 2;

  // 最小边界
  if (offset < 0) {
    offset = 0;
  }

  // 最大边界
  if (offset > maxOffset) {
    offset = maxOffset;
  }

  // doms.ul.style.transform = `translateY(-${offset}px)`;

  let li = doms.ul.querySelector(".active");

  if (li) {
    li.classList.remove("active");
  }

  li = doms.ul.children[index];
  if (li) {
    li.classList.add("active");
  }
}

doms.audio.addEventListener("timeupdate", setOffset);
